<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-1.11.3.min.js"></script>
</head>
<body>
    <input type="file" id="filess">
</body>
<script>
//图片自适应，平铺，居中显示
/*
 //-->写法以及调用方法<img class="fox-img main-img" src="img/u230.png" onload="imgRepeat(this,800,800,true)"/>
 */
 function imgRepeat(imgd, maxWidth, maxHeight,countflag) {
    var image = new Image();
    // 获取允许的最大宽度和最大高度
    var iwidth = maxWidth;
    var iheight = maxHeight;
    //如果本地无效就删除.src,服务器上必须要
    image.src = imgd.src;
    if (image.width > 0 && image.height > 0) {
        if(image.width / image.height == iwidth / iheight){
            // 方图
            imgd.width = iwidth;
            imgd.height = iheight;
            if(countflag){
                $(imgd).css("marginTop",0);
                $(imgd).css("marginLeft",0);
            }
        }else{
            if(image.width / image.height > iwidth / iheight){
                // 横图
                imgd.width = (image.width * iwidth) / image.height;
                imgd.height = iheight;
                if(countflag){
                    $(imgd).css("marginLeft","-"+Math.ceil(imgd.width-maxWidth)/2+"px");
                    $(imgd).css("marginTop",0);
                }
            }else{
                // 竖图
                imgd.width = iwidth;
                imgd.height = (image.height * iwidth) / image.width;
                if(countflag){
                    $(imgd).css("marginTop","-"+Math.ceil(imgd.height-maxHeight)/2+"px");
                    $(imgd).css("marginLeft",0);
                }
            }
        }
    }
}
</script>
<script>
    $("#filess").on("change",function(e){
        console.log(e.target.files,'?????') //获取到e.target.files[0].url 为加密的路径，这里可以用 new FileReader 对象 上传获取
    })
</script>
</html>